<template>
  <h1>1.组件的基本写法</h1>
  <h2>count:{{ count }}</h2>
  <button @click="changeCount">改变count</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import { ref } from "vue";

/* 
  ref创建一个基本类型值的响应式数据
    1.使用ref创建的响应式数据,是一个RefImpl对象,值保存在这个对象的value属性上
    2.如果我们在模板中使用这个数据,则可以省略value,但是在setup函数中使用,需要使用xxx.value
*/
let count = ref(0);
console.log(count.value);

const changeCount = () => {
  count.value++;
};
</script>

<style scoped></style>
